<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>动画</title>
		<style type="text/css">
			.box{
				width: 300px;
				height: 500px;
				border: 5px solid aqua;
				animation: cha 10s infinite linear 1s;
				font-size: 20px;
				line-height: 80px;
				text-align: center;
				
			}
			/* 动画:
			step1:创建关键帧
			@keyframe 动画名字{
				from{}
				to{}
			}
			step2:绑定动画
			animation:动画名字 持续时间 次数(infinite是无限次数的意思) 延迟
			 from：开始帧  to：结束帧   也可用时间节点表示：用20%*10s,则动画是2s*/
			@keyframes cha{
				from{/* 开始帧 */
				transform: rotate(0);
				background-color: #ff55ff;
				}
				to{/* 结束帧 */
				width: 800px;
				
				transform: rotate(360deg );
				background-color: #ffaa7f;
				}
				
			}
			@-webkit-keyframes{
				0%,15%{width: 300px;
				height: 500px;
				border: 5px solid pink;}
				20%,40%{/* 时间节点  某种状态持续一段时间*/
					transform: rotate(0);
					background-color: #ff55ff;
					}
					40%,65%{
					width: 800px;
					
					transform: rotate(180deg );
					background-color: #005500;
					}
					70%,95%{
						width: 1200px;
						height: 200px;
						background-color: blueviolet;
						transform: rotate(360deg);
					}
					/* 100%{
						width: 300px;
						height: 300px;
						background-color: chartreuse;
						transform: rotate(360deg);
					} */
				}
			}
			
		</style>
	</head>
	<body>
		
		<div class="box">这是一个盒子</div>
		
	</body>
</html>
